<template>
<div class="container_common1 customer">
    <section class="missionCenter pad_b_40">
        <div class="questionList">
            <div class="div pad_l_r_15" v-if="list&&list.length>0">
                <div class="listItem bor_b flex align_center pad_t_b_15" v-for="(item,i) in list" :key="i" :class="{'border_none':i==list.length-1}">
                    <div class="left">
                        <img :src="item.icons" alt class="icon" />
                        <p class="title center_text size13 c111">{{item.name}}</p>
                    </div>
                    <div class="right bor_l pad_l_r_15 flex1 size13 c333">
                        <p class="rightItem bor_b pad_t_b_15" v-for="(item1,k) in item.data" :key="k" @click="openAnswer(i,k)">{{item1.name}}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- <footer class="chat" @click="toChat">联系客服</footer> -->
    <!-- <footer class="footer center_text">
      <p class="name">若没找到您想要的答案，可发送问题至邮箱：</p>
      <p class="size15 blue_text mar_t_6">QULIAN@ghjj.com</p>
    </footer> -->
    <van-popup v-model="show" position="bottom" closeable class="models">
        <h2 class="title c222 bor_b">{{answerList.title}}</h2>
        <div class="answer">
            <p class="detail c666" v-for="(item,i) in answerList.answers" :key="i">{{item}}</p>
        </div>
    </van-popup>
</div>
</template>

<script>
import {
    mapActions
} from "vuex";
import $ from 'jquery'
export default {
    created() {
        this.init();
    },
    data() {
        return {
            list: [],
            show: false, //问题显示
            answerList: {} //答案
        };
    },
    computed: {
        countryCode() {
            return this.$store.state.countryCode;
        }
    },
    mounted() {
        if (this.$store.state.nowThemeInfo == 'night-theme') {
            $('.customer').find('.questionList').css('border', '1px solid rgba(227, 227, 227, 0.1)')
        } else {
            $('.customer').find('.questionList').css('border', '1px solid rgba(227, 227, 227, 0.7)')
        }

        let data = [{
                name: "账户安全",
                icons: require("../../assets/images/home/customer1.png"),
                data: [{
                        name: "如何注册和登录",
                        data: [
                            "注册：提供手机号和邮箱注册两种方式，手机号注册需要输入手机号、密码、验证码，邮箱注册需要输入邮箱、密码、验证码。"
                        ]
                    },
                    {
                        name: "忘记密码怎么找回",
                        data: ["根据注册账号不同，可选择手机号找回/邮箱找回。"]
                    },
                    {
                        name: "如何修改密码",
                        data: ["进入个人中心，在【个人中心】-【账户中心】中修改。"]
                    }
                ]
            },
            {
                name: "充币和提币",
                icons: require("../../assets/images/home/customer3.png"),
                data: [{
                        name: "如何充币",
                        data: [
                            "1.进入【资产】-【充币】打开充币页面。",
                            "2.在充币页面获取充币地址。",
                            "3.场外充币：在第三方平台输入Fvex提供的充币地址，输入充值数量后提交，第三方提币请求成功后，将在区块确认完成后到账。",
                            "4.充币成功。"
                        ]
                    },
                    {
                        name: "充币/提币后多久到账",
                        data: ["充币/提币后，到账时间根据区块确认时间不同。"]
                    },
                    {
                        name: "怎么提币",
                        data: [
                            "1.进入【资产】-【提币】，打开提币页面。",
                            "2.选择币种，输入提币到的地址，要提取的数量。",
                            "3.核对提取地址和数量，点击“提币”。"
                        ]
                    }
                ]
            },
            {
                name: "交易相关", //
                icons: require("../../assets/images/home/customer2.png"),
                data: [{
                        name: "Fvex指数价格是怎么算出来的",
                        data: [
                            "全球top10交易所现货价格加权后的均价，如果价格偏离所有交易所中位数正负3%，则按照中位数正负3%计算，如长期更新缓慢，则会剔除此交易所数据，等质量恢复再恢复权重。"
                        ]
                    },
                    {
                        name: "什么是USDT永续合约",
                        data: ["USDT永续合约是以USDT为计价单位和结算单位的数字货币合约。"]
                    },
                    {
                        name: "限价和市价有什么不同",
                        data: [
                            "限价：限价单规定了买者愿意买的最高价格或卖者愿意卖的最低价格。用户在设定限价后，市场会以达到对有利方向的价格优先成交，原则是“买低卖高”。",
                            "市价：按当时市场价格即刻成交的指令。您在下达这种指令时无需指明具体的价位，而是要求以当时市场上可执行的最好价格达成交易。"
                        ]
                    },
                    {
                        name: "什么是止盈",
                        data: ["止盈：获得一定收入后，将所有虚拟货币卖出以保持盈利。"]
                    },
                    {
                        name: "什么是止损",
                        data: [
                            "止损：亏损到一定程度后，将所持虚拟货币卖出以防止亏损进一步扩大。"
                        ]
                    },
                    {
                        name: "什么是开多",
                        data: ["开多指的是多仓，也可以叫看多，买入某种合约，看涨。"]
                    },
                    {
                        name: "什么是开空",
                        data: ["开空指的是空仓，也可以叫看空，卖出某种合约，看跌。"]
                    },
                    {
                        name: "开仓收取什么费用",
                        data: ["开仓收取手续费、冻结保证金，并不收取其他任何费用。"]
                    },
                    {
                        name: "平仓收取什么费用",
                        data: [
                            "平仓有手动平仓、止盈/止损平仓和强制平仓。",
                            "手动平仓和止盈/止损平仓收取平仓手续费、返还占用保证金。",
                            "强制平仓收取平仓手续费，也将损失全部保证金。"
                        ]
                    },
                    {
                        name: "什么时候会触发强平",
                        data: ["当您的账户风险度达到100%将进入爆仓流程"]
                    }
                ]
            }
        ];
        this.list = data;
    },
    watch: {
        name(val) {
            this.name = val.replace(/\s+/g, "");
        },
        idCard(val) {
            this.idCard = val.replace(/\s+/g, "");
        }
    },
    methods: {
        ...mapActions([
            "setnavTitle",
            "setnavBarState",
            "settabBarState",
            "setbackRouter",
            "setnavBarArrow",
            "setCountryCode"
        ]),
        init() {
            this.setnavTitle("客服咨询");
            this.setbackRouter("");
            this.setnavBarState(true);
            this.settabBarState(false);
            this.setnavBarArrow(true);
            setIframe("block");
        }, // 初始化页面
        //显示答案
        openAnswer(i, k) {
            var data = {
                title: this.list[i].data[k].name,
                answers: this.list[i].data[k].data
            };
            this.answerList = data || {};
            this.show = true;
        },
        toChat() {
            this.$router.push({
                path: "/chat"
            });
        }
    },
    beforeDestroy() {
        setIframe();
    }

};
</script>

<style lang="scss">
.customer {
    .models {
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }
}
</style><style lang="scss" scoped>
@import '@/assets/scss/theme.scss';

.customer {
    @include base-background();

    .questionList {
        // border: 1px solid rgba(227, 227, 227, 0.7);
        margin-top: 10px;
        margin-bottom: 50px;

        .left {
            width: 88px;

            .icon {
                width: 30px;
                height: 30px;
                margin: 0 auto;
            }
        }

        .rightItem {
            padding: 12px 0;

            &:first-child {
                padding-top: 0;
            }

            &:last-child {
                border: none;
                padding-bottom: 0;
            }
        }
    }

    .chat {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100vw;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        background-color: #3D77E0;
        font-size: 16px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .footer {
        margin: 0 -15px;
        background: #f8f7fd;

        padding: 25px 0;

        .name {
            font-size: 14px;
            color: #666666;
        }
    }

    .models {
        @include base-background();

        min-width: 300px;

        .title {
            font-size: 18px;
            padding: 15px 35px;
            text-align: center;

        }

        .answer {
            height: 240px;
            padding: 10px 15px;
            overflow-y: auto;

            .detail {
                font-size: 14px;

                margin-top: 10px;
            }
        }
    }
}
</style>
